import 'package:app/routes/my_routes.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class MessagePage extends StatelessWidget {
  final MessageLogic logic = Get.put(MessageLogic());
  final MessageState state = Get.find<MessageLogic>().state;

  // final GetSearchChange _getSearchChange = GetSearchChange();

  @override
  Widget build(BuildContext context) {
    var list = state.messages;

    return GetBuilder<MessageLogic>(
      builder: (logic) {
        return Container(
          child: ReorderableListView(
            onReorder: (_, __) {},
            children: list
                .map(
                  (e) => ListTile(
                    key: ValueKey<String>(e.title),
                    leading: ClipOval(
                      child: e.url == ""
                          ? Image.asset(
                              'assets/icons/cat.jpeg',
                            )
                          : CachedNetworkImage(
                              imageUrl: e.url,
                              placeholder: (context, url) =>
                                  CircularProgressIndicator(),
                              errorWidget: (context, url, error) => ClipOval(
                                child: Image.asset(
                                  'assets/icons/cat.jpeg',
                                ),
                              ),
                            ),
                    ),
                    title: Text(e.title ?? ''),
                    subtitle: Text(e.subTitle ?? ''),
                    // trailing: Container(alignment: Alignment.centerRight,child: Text('data'),),
                    trailing: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Visibility(
                          visible: e.isRead,
                          child: ClipOval(
                            child: Container(
                              width: 30.w,
                              height: 30.h,
                              color: Colors.red,
                            ),
                          ),
                        ),
                        e.timestamp == null
                            ? Text('')
                            : Text(
                                DateTime.fromMillisecondsSinceEpoch(e.timestamp)
                                    .toLocal()
                                    .toString()
                                    .substring(0, 16)),
                      ],
                    ),
                    onTap: () {
                      Get.toNamed(RouteConfig.CHAT);
                    },
                  ),
                )
                .toList(),
          ),
        );
        // return Column(
        //   crossAxisAlignment: CrossAxisAlignment.start,
        //   children: [
        //     SizedBox(height: ScreenUtil().setHeight(80), child: InfoStatusView()),
        //     Expanded(
        //         child: ListView.builder(
        //           itemBuilder: (context, index) {
        //             return Container(
        //               child: MessageItem(list[index].url, list[index].title, list[index].subTitle,
        //                   list[index].timestamp, list[index].isRead),
        //               decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
        //             );
        //           },
        //           itemCount: list.length,
        //         ))

        // ListView.builder(
        //   itemBuilder: (context, index) {
        //     return Container(
        //       child: MessageItem(list[index].url, list[index].title, list[index].subTitle, list[index].timestamp,
        //           list[index].isRead),
        //       decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
        //     );
        //   },
        //   itemCount: list.length,
        // )
        // ],
        // );
      },
    );
  }
}
